<template>
    <div class="page">
        <nav-bar :isLogin="true">
            <!-- 具名插槽 -->
            <template #left>
                <div class="lefts">
                    <van-icon name="search"></van-icon>
                </div>
            </template>
            <template #center>
                <span @click="$router.push('/city')">
                    {{ city ? city.name : '' }}
                </span>
            </template>

        </nav-bar>
        <div>
            <div v-if="cateList.length == 0">
                <img src="../../assets/cate.svg" alt="">
            </div>
            <van-swipe class="my-swipe" indicator-color="#3190e8" v-else>
                <van-swipe-item v-for="(item, index)  in cateList" :key="index">
                    <div class="cate">
                        <div class="cate_item" v-for="(cate, i) in item" :key="i" @click="goInfo(cate.id,cate.title)">
                            <div>
                                <img :src="'https://fuss10.elemecdn.com/' + cate.image_url" alt="">
                            </div>
                            <div class="title">
                                {{ cate.title }}
                            </div>
                        </div>
                    </div>
                </van-swipe-item>
            </van-swipe>
        </div>

        <div class="shops" v-if="shopList.length != 0">
            <div class="titles">
                <van-icon name="shop-o" /> 附近商家
            </div>
            <div>
                <div v-for="(item, index) in shopList" :key="index">
                    <shop :shop='item'></shop>
                </div>
            </div>
        </div>
        <div v-else>
            <img src="../../assets/loading.svg" alt="" v-for="(item, index) in 10" :key="index">
        </div>
    </div>
</template>
<script>
import { getCityAddress, getFoodsCate, getShopList } from '@/api/home'
import shop from '@/components/shop'
export default {
    data() {
        return {
            city: null,
            cateList: [],
            geohash: [],
            shopList: []
        }
    },
    components: {
        shop
    },
    async created() {
        let geohash = this.$route.query.geohash;
        this.geohash = geohash.split(",")
        let res = await getCityAddress(geohash);
        this.city = res.data;
        // 获取食物分类列表
        let cateList = await getFoodsCate();
        this.cateList = [cateList.data.slice(0, 8), cateList.data.slice(8)]
        let data = {
            latitude: this.geohash[0],
            longitude: this.geohash[1]
        }
        let shopList = await getShopList(data);
        this.shopList = shopList.data;
    },
    methods:{
        goInfo(id,title){
            console.log(this.city.latitude)
            this.$router.push({
                path:"/cate/info",
                query:{
                    latitude:this.city.latitude,
                    longitude:this.city.longitude,
                    cate_id:id,
                    title:title
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.page {
    padding-bottom: 13.33333vw;
    .lefts {
        font-size: 20px;
    }

    .my-swipe {
        width: 100vw;
        background: #fff;
        border-bottom: 1px solid #e4e4e4;
    }

    .cate {
        width: 100vw;
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 20px;
    }

    .cate_item {
        width: 25%;
        text-align: center;
        font-size: 13px;
        color: #666;
        margin: 10px 0;

        img {
            width: 40px;
        }

        .title {
            margin-top: 10px;
        }
    }
}

.shops {
    width: 100vw;
    // border-top: 1px solid #e4e4e4;
    background: #fff;
    margin-top: 10px;

    .titles {
        width: 100%;
        padding: 10px 15px;
        color: rgb(155, 155, 155);
        font-size: 13px;
    }
}

.loading {
    width: 100%;
}
</style>